// 受控组件
import React from 'react';
class Hellow extends React.Component {
    state = {
        txt: '受控组件',
        isCheck: false
    }
    handleChange = (e) => {
        // 获取当前Dom
        const targect = e.target;
        // 获取类型值
        const value = targect.type === 'checkbox' 
            ? targect.checked
            : targect.value
        // 获取name
        const name = targect.name;
        console.log(e.target.type);
        this.setState({
            [name]: value
        })
     }
    render() {
        return (
            <>
                <br />
                <input type='txt' name='txt' value={this.state.txt} onChange={this.handleChange} />
                {/* 复选框 */}
                <input type="checkbox" name='isCheck' checked={this.state.isCheck} onChange={this.handleChange} />
            </>
        )
    }
}

// 非受控组件
// import React from 'react';
// class Hellow extends React.Component {
//     this.txtRef = React.createRef();
//     render() {
//         return (
//             <>
//                 <br />
//                 <input type='txt' ref={this.txtRef} />
//             </>
//         )
//     }
// }

export default Hellow;